<script language="javascript" type="text/javascript">
	function show_hide_picker(divID, catcolor){ldelim}
		if(catcolor != ''){ldelim}var catcolor = document.getElementById('catcolor_' + divID).value.replace('#', '');;{rdelim}
		//alert(catcolor);
		if(document.getElementById('color_' + divID).style.display == 'none'){ldelim}
			document.getElementById('color_' + divID).innerHTML = 'The textbox will update when you click the image again. <br><applet code="colorpicker.class" width="400" height="450" MAYSCRIPT><param name="js_variable" value="color"><param name="start_value" value="' + catcolor + '"></applet>';
			document.getElementById('color_' + divID).style.display = '';
		{rdelim}else{ldelim}
			document.getElementById('color_' + divID).innerHTML = '';
			document.getElementById('color_' + divID).style.display = 'none';
			document.getElementById('catcolor_' + divID).value = color.replace('#', '');;
		
			document.getElementById('catcolor_' + divID).value = "wait...";
			new Ajax.Request('admin_categories.php', {ldelim}method:'post', postBody:'action=changecolor&id=' + divID + '&color=' + color.replace('#', ''), onSuccess:document.getElementById('catcolor_' + divID).value = color.replace('#', ''){rdelim});
			document.getElementById('catname_' + divID).style.color = '#' + color.replace('#', '');
			
		{rdelim}		
	{rdelim}
</script>

{literal}
	<style type="text/css">
		.eip_editable { background-color: #ff9; padding: 3px; }
		.eip_savebutton { background-color: #36f; color: #fff; }
		.eip_cancelbutton { background-color: #000; color: #fff; }
		.eip_saving { background-color: #903; color: #fff; padding: 3px; }
		.eip_empty { color: #afafaf; }
		table td {background:#fff}		
	</style>
{/literal}

<div id = "catmanager" >
<br />
<fieldset><legend>Category Manager</legend>
<table style="border:none; width:auto; background:#fff;">
	{section name=thecat loop=$cat_array}
		{if $cat_array[thecat].auto_id neq 0}
			<tr style="background:#fff; border:none">	
				{$cat_array[thecat].spacercount|repeat_count:'<td></td>'}
				<td style="border:1px solid #ccc; background:#eee">
					<div id = "above_{$cat_array[thecat].auto_id}">
						&nbsp;
					</div>
				</td>
			</tr>
		{/if}
		<tr style="background:#fff; border:none;">	
			{$cat_array[thecat].spacercount|repeat_count:'<td></td>'}
			<td style="background:#fff;">
				<div id = "cat_drop_{$cat_array[thecat].auto_id}">
					{if $cat_array[thecat].auto_id neq 0}<div id = "cat_drag_{$cat_array[thecat].auto_id}">{/if}
						{*$cat_array[thecat].name*}
						
			       <a href = "javascript://" onclick="
			       var replydisplay=document.getElementById('{$cat_array[thecat].auto_id}').style.display ? '' : 'none';
			       document.getElementById('{$cat_array[thecat].auto_id}').style.display = replydisplay;
			       ">
			       	name 
			       </a>: <span id="catname_{$cat_array[thecat].auto_id}" style="color: #{$cat_array[thecat].color}"><b>{eipItem item=qeip_CatName unique=$cat_array[thecat].auto_id ShowJS=TRUE}</b></span>
						
		        <div id="{$cat_array[thecat].auto_id}" style="display:none">
		        	Id: {$cat_array[thecat].auto_id}<br />
		        	
		        	{*
			        	Parent: {eipItem item=qeip_CatParent unique=$cat_array[thecat].auto_id ShowJS=TRUE} -- {$cat_array[thecat].parent_name}<br />
			        	Sort Order: {eipItem item=qeip_CatOrder unique=$cat_array[thecat].auto_id ShowJS=TRUE}<br />
			        	Items in this category: -coming soon- <br />
			        *}
			        <a href = "?action=remove&id={$cat_array[thecat].auto_id}"  onclick="return confirm('Are you sure you want to delete? You cannot undo this.')">Delete This Category</a><br />
		        	Color: <input type="text" value="{$cat_array[thecat].color}" id="catcolor_{$cat_array[thecat].auto_id}" size="7"> <a href="javascript://" onclick="show_hide_picker({$cat_array[thecat].auto_id});">  <img src="{$my_pligg_base}/templates/{$the_template}/images/color_wheel.png" /></a><br />
		        	<div id="color_{$cat_array[thecat].auto_id}" style="display:none;">xx<br></div>
		        	{*
		        		Remove this category:  -coming soon- <br />
		        	*}
					</div>
					{if $cat_array[thecat].auto_id neq 0}</div>{/if}
				</div>
			</td>
		</tr>
		{if $cat_array[thecat].auto_id neq 0}
			<tr>	
				{$cat_array[thecat].spacercount|repeat_count:'<td></td>'}
				<td style="border:1px solid #ccc; background:#eee">
					<div id = "below_{$cat_array[thecat].auto_id}">
						&nbsp;
					</div>
				</td>
			</tr>
		{/if}

		<script language="javascript" type="text/javascript">
		{if $cat_array[thecat].auto_id neq 0}
			var drag_{$cat_array[thecat].auto_id} = new Draggable('cat_drag_{$cat_array[thecat].auto_id}',{ldelim}revert:true{rdelim});
		{/if}

			Droppables.add('cat_drop_{$cat_array[thecat].auto_id}', {ldelim}
	   		onDrop: function(element, droppableElement) 
     		{ldelim} document.getElementById('catmanager').innerHTML = '<br />Please Wait...'; window.location='admin_categories.php?action=changeparent&id=' + element.id + '&parent=' + droppableElement.id; {rdelim}{rdelim});			

		{if $cat_array[thecat].auto_id neq 0}
			Droppables.add('above_{$cat_array[thecat].auto_id}', {ldelim}
	   		onDrop: function(element, droppableElement) 
     		{ldelim} document.getElementById('catmanager').innerHTML = '<br />Please Wait...'; window.location='admin_categories.php?action=move_above&moveabove_id=' + droppableElement.id + '&id_to_move=' + element.id; {rdelim}{rdelim});			

			Droppables.add('below_{$cat_array[thecat].auto_id}', {ldelim}
	   		onDrop: function(element, droppableElement) 
     		{ldelim} document.getElementById('catmanager').innerHTML = '<br />Please Wait...'; window.location='admin_categories.php?action=move_below&movebelow_id=' + droppableElement.id + '&id_to_move=' + element.id; {rdelim}{rdelim});			
		{/if}
		
		</script>
	{/section}
</table>

<hr />
<img src="{$my_pligg_base}/templates/{$the_template}/images/new_cat.png" align="absmiddle" /> <a href = "?action=add">Add a new category</a>
<hr />
<img src="{$my_pligg_base}/templates/{$the_template}/images/cat_col_css.png" align="absmiddle" /> <a href = "admin_category_colors.php">Generate the new CSS for Category Colors</a>
<hr />
	<em>If you're using URLMethod 2, you'll want to use this line in your .htaccess file.<br /><br />
	RewriteRule ^(all{section name=thecat loop=$cat_array}{if $cat_array[thecat].auto_id neq 0}|{$cat_array[thecat].safename}{/if}{/section})/([a-zA-Z0-9-]+)/?$ story.php?title=$2 [L]<br />
	RewriteRule ^(all{section name=thecat loop=$cat_array}{if $cat_array[thecat].auto_id neq 0}|{$cat_array[thecat].safename}{/if}{/section})/?$ ?category=$1 [L]</em>
</fieldset>
</div>





{*
			       drag_{$cat_array[thecat].auto_id}.destroy();
*}